<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData">
      <template #modelNameMsg="{ record }">
        <span class="col-text">{{ record.brandName }} </span>
        <span> | </span>
        <span class="col-text">{{ record.seriesName }}</span>
        <span> | </span>
        <span class="col-text">{{ record.yearStyleName }}</span>
        <span> | </span>
        <span class="col-text">{{ record.gearboxTypeStr }}</span>
      </template>
      <template #space="{ record }">
        <span class="col-text">车门数：{{ record.doorCount }} </span>
        <span> | </span>
        <span class="col-text">座位数：{{ record.seatNum }}</span>
      </template>
      <template #sortNameList="{ record }">
        <div>{{ record.sortNameList?.join(' | ') }}</div>
      </template>
      <a-popconfirm v-model:popup-visible="delPopVisible" content="是否确认删除?" type="error" />
    </table-index>
  </div>
</template>

<script setup name="CarModelList">
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import { getCarModelList, carModelDelete } from '@/api/asset/carModel'
  import { onMounted, reactive, computed } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  import { Modal, Notification } from '@arco-design/web-vue'
  const { navigateTo } = useNavigate()

  const carModelDict = usePageDict('carModelDict')
  // 接口参数（不包含page信息）
  const queryParam = reactive({})
  console.log(carModelDict)
  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '车型', prop: 'modelName', type: 'a-input' },
      {
        label: '品牌',
        prop: 'brandId',
        type: 'remote-select',
        attrs: {
          type: 'search_car_brand',
          params: {
            id: queryParam.brandId,
          },
        },
      },
      {
        label: '车系',
        prop: 'carSeriesId',
        type: 'remote-select',
        attrs: {
          type: 'car_model_tenant_carList',
          params: {
            seriesId: queryParam.carSeriesId,
          },
        },
      },
      {
        label: '变速箱',
        prop: 'gearboxType',
        type: 'a-select',
        options: carModelDict.gearboxTypeMap,
      },

      {
        label: '能源类型',
        prop: 'fuelOilType',
        type: 'a-select',
        options: carModelDict.fuelOiltypeMap,
      },

      {
        label: '车型分类',
        prop: 'sortIdList',
        type: 'a-select',
        multiple: true,
        options: carModelDict.modelSortMap,
      },
    ]
  })

  // 初始化
  const init = () => {
    loadData()
  }
  // table 配置
  const table = useTable({
    columns: [
      {
        title: '车型',
        dataIndex: 'modelName',
        fixed: 'left',
      },
      {
        title: '车型信息',
        dataIndex: 'modelName',
        slotName: 'modelNameMsg',
      },
      {
        title: '空间信息',
        dataIndex: 'space',
        slotName: 'space',
        width: 180,
      },
      { title: '车型分类', dataIndex: 'sortNameList', slotName: 'sortNameList' },
      { title: '能源类型', dataIndex: 'fuelOilTypeStr', width: 100 },
      { title: '创建时间', dataIndex: 'createTime', width: 180 },
      { title: '创建人', dataIndex: 'createUser', width: 100 },
    ],
    operates: [
      {
        label: '详情',
        permission: 'svms:asstes:car:car-model:view',
        method: (record) => {
          navigateTo('/car-model/detail/' + record.id, '车型-详情')
        },
      },
      {
        label: '编辑',
        permission: 'svms:asstes:car:car-model:edit',
        method: (record) => {
          navigateTo('/car-model/edit/' + record.id, '车型-编辑')
        },
      },
      {
        label: '删除',
        permission: 'svms:asstes:car:car-model:delete',
        method: (record) => {
          // useDelete(carModelDelete, { id: record.id })
          Modal.confirm({
            title: '删除',
            simple: true,
            cancelText: '取消',
            okText: '确认',
            bodyStyle: {
              'text-align': 'center',
            },
            content: '是否要删除此数据，删除后不恢复？',
            onOk: () => {
              carModelDelete({ id: record.id }).then(() => {
                Notification.success({
                  content: '删除成功',
                  closable: true,
                  duration: 3000,
                })
                loadData()
              })
            },
          })
        },
      },
    ],
    buttons: [
      {
        type: 'primary',
        permission: 'svms:asstes:car:car-model:add',
        icon: 'plus',
        label: '新增',
        method: () => handleAdd(),
      },
    ],
  })

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getCarModelList)
  // 添加事件
  const handleAdd = () => {
    navigateTo('/car-model/create')
  }
  // 删除气泡
  // mounted 调用接口
  onMounted(() => {
    init()
  })
</script>

<style lang="less" scoped></style>
